<template>
    <div class="ball" :style="cust_style" :id="ballId">
       <slot></slot>
    </div>
</template>
<script>
export default {
    data(){
        return {

        }
    },
    methods:{
        stop(){
            cancelAnimationFrame(this.timer);
        },
    },
    mounted(){
        let ball = document.getElementById(this.ballId);
       
        let fn = ()=>{
            let left = this.value;
            if(left>=this.target){
                return cancelAnimationFrame(this.timer)
            }
            this.$emit("input",left+2);
            ball.style.transform = `translate(${this.value}px)`
            this.timer = requestAnimationFrame(fn)
        }
        this.timer = requestAnimationFrame(fn)
       
    },
    props:{
        color:{
            type:String,
            default:()=>("#ccc")
        },
        value:{
            type:Number,
            default:0
        },
        target:{
            type:Number,
            default:300
        },
        
    },
    computed:{
        ballId(){
            
            return `ball_${this._uid}`
        },
        cust_style(){
            return {
                background:this.color
            }
        }
    }
}
</script>
<style lang="less" scoped>
.ball{
    width: 100px;
    height:100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    color:#422;
    font-size:20px;
    border:1px sandybrown solid;
}
</style>
